<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var step3 = 10;
        var step4 = 10;
        //true是横向   false是竖
        var flag = true;
        window.onload = function (){
            setInterval(move,10);
        }
        function move(){
            var divElement = document.getElementById("div_img");
            var img_left = parseInt(divElement.style.left);
            var img_top = parseInt(divElement.style.top);
            var availWidth = screen.availWidth-200;
            var availHeight = screen.availHeight-300;
            if (flag){
                if(img_left - 100  > availWidth || img_left < 0){
                    step3 = -step3;
                    flag = !flag;
                }
                img_left = (img_left + step3 )+ "px";
            }else{
                if(img_top - 100 > availHeight || img_top < 0){
                    step4 = -step4;
                    flag = !flag;
                }
                img_top = (img_top + step4 )+ "px";
            }
            divElement.style.left = img_left;
            divElement.style.top = img_top;
        }

    </script>
</head>
<body>
<div style="height: 100%; width: 100%" id="border">
    <div id="div_img" style="position: absolute;left: 0px;top: 0px;">
        <img src="../img/demo3/1.jpg" style="width: 100px ; height: 100px" id="img" >
    </div>
</div>
</body>
</html>